<h4>Basic mat-select with initial value</h4>
<mat-form-field>
  <mat-label>Favorite Food</mat-label>
  <mat-select [(value)]="selectedFood">
    <mat-option></mat-option>
    @for (option of foods; track option) {
      <mat-option [value]="option.value">{{ option.viewValue }}</mat-option>
    }
  </mat-select>
</mat-form-field>
<p>You selected: {{selectedFood}}</p>

<h4>Basic native select with initial value</h4>
<mat-form-field>
  <mat-label>Favorite Car</mat-label>
  <select matNativeControl (change)="selectCar($event)">
    <option value=""></option>
    @for (option of cars; track option) {
      <option [value]="option.value"
            [selected]="selectedCar === option.value">{{ option.viewValue }}</option>
    }
  </select>
</mat-form-field>
<p>You selected: {{selectedCar}}</p>
